<template>
  <div class="profile-body">
    <div class="top">
      <ul>
        <li class="profile-body-item">
          <div>
            <img src="~assets/images/profile/message.svg" alt="" />
          </div>
          <div>
            <p>我的消息</p>
          </div>
        </li>
        <li class="profile-body-item">
          <div>
            <img src="~assets/images/profile/pointer.svg" alt="" />
          </div>
          <div>
            <p>积分商城</p>
          </div>
        </li>
        <li class="profile-body-item">
          <div>
            <img src="~assets/images/profile/vip.svg" alt="" />
          </div>
          <div>
            <p>会员卡</p>
          </div>
        </li>
      </ul>
    </div>
    <div class="bottom">
      <ul>
        <li class="profile-body-item">
          <div>
            <img src="~assets/images/profile/cart.svg" alt="" />
          </div>
          <div>
            <p>我的购物车</p>
          </div>
        </li>
        <li class="profile-body-item">
          <div>
            <img src="~assets/images/profile/shopping.svg" alt="" />
          </div>
          <div>
            <p>下载购物APP</p>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ProfileBody',
  props: {},
  components: {},
  data () {
    return {}
  },
  created () {},
  mounted () {},
  computed: {},
  methods: {},
  watch: {}
}
</script>

<style lang="less" scoped>
.profile-body {
  ul {
    li:last-child {
      div:last-child {
        border: 0;
      }
    }
  }

  .top {
    border-bottom: 10px solid #e0e0e0;
  }

  .profile-body-item {
    display: flex;

    div:first-child {
      width: 20px;
      padding: 10px 0;

      > img {
        vertical-align: middle;
        width: 100%;
      }
    }

    div:last-child {
      flex: 1;
      margin-left: 5px;
      padding: 10px 0;
      border-bottom: 1px solid #e1e1e1;
      color: #000;
      font-size: 14px;

      > p {
        margin-top: 3px;
      }
    }
  }
}
</style>
